
<template>
  <div class="detailed">
    <a-modal
      title="数据明细"
      width="900px"
      :visible="visible"
      :confirm-loading="confirmLoading"
      cancelText="取消"
      okText="导出"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-tabs v-model="activeId" class="table" @change="handleTabChange">
        <a-tab-pane v-for="item in tabOptions" :key="item.id" :tab="item.label"></a-tab-pane>
      </a-tabs>
      <a-table :columns="columns" :data-source="data" @change="handlePageChange" :pagination="{current: currentPage, total }"></a-table>
    </a-modal>

  </div>
</template>

<script >
import { mapState } from 'vuex'
import { getTableDataServe } from "@/api/dashboard/boardLabel"
import { getFieldListByComponent } from '../../lib/analysisData'

export default {
  data () {
    return {
      activeId: 'base',
      tabOptions: [
        {
          id: 'base',
          label: '基础数据'
        },
        {
          id: 'detailed',
          label: '详细数据'
        }
      ],
      confirmLoading: false,
      visible: false,
      currentPage: 1,
      total: 0,
      data: [],
      columns: [],
    }
  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: state => state.selectedComponent,
    }),
  },
  methods: {
    getData () {
      const list = getFieldListByComponent(this.selectedComponent)
      const {
        tableName,
        datasourceId: dataSourceId
      } = this.selectedComponent.props.value
      // console.log('getTableDataServe',Api.getTableDataServe)
      getTableDataServe({
        pageNo: this.currentPage,
        // currentPage: this.currentPage,
        dataSourceId,
        tableName,
        pageSize: 10,
      }).then(res => {
        const data = res.data.records[0]
        if (this.activeId === 'base') {
          this.columns = list.map(item => {
            return {
              title: item.label,
              dataIndex: item.value,
              key: item.value
            }
          })
        } else {
          this.columns = data.columns.map(item => {
            return {
              title: item,
              dataIndex: item,
              key: item
            }
          })
        }

        this.currentPage = res.data.current
        this.total = res.data.total
        this.data = data.dataSource.map((item, index) => {
          return {
            ...item,
            key: index
          }
        })
      })
    },
    show () {
      this.visible = true
      this.getData()
    },
    handleOk () {

    },
    handleCancel () {
      this.visible = false
    },
    handleTabChange (value) {
      this.activeId = value
      this.getData()
    },
    handlePageChange (page) {
      // console.log(page)
      this.currentPage = page.current
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
